<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 400px;
      border: 1px solid #ddd;
      text-align: center;
      padding-bottom: 10px;
    }
    .container p{
      font-size: 1.3em;
      font-weight: bold;
      text-align: center;
    }
    .container img{
      width: 340px;
      height: 340px;
      border-radius: 50%;
    }
    .container input{
      width: 340px;
      display: block;
      margin: 10px auto;
    }
    .container .time{
      width: 340px;
      height: 30px;
      margin: 0px auto;
    }
    .container .time .left{
      float: left;
    }
    .container .time .right{
      float: right;
    }
  </style>
</head>
<body>
  <div class="container">
    <video src="./assets/let_it_go.mp4"
      width="640" height="360" id="video"
      style="background: #000;"></video>

    <input id="range" type="range" min="0" value="0" max="0">
    <div class="time">
      <span class="left">00:00</span>
      <span class="right">00:00</span>
    </div>
    
    <button id="btn_play">播放/暂停</button>
    <button id="btn_vp">音量+</button>
    <button id="btn_vm">音量-</button>
    <button id="btn_05">0.5倍速</button>
    <button id="btn_1">1倍速</button>
    <button id="btn_2">2倍速</button>
  </div>
  <script src="./assets/moment.js"></script>
  <script>
    // 创建播放器
    let player = document.getElementById('video') 

    // 捕获改变当前进度条的位置的事件
    let range = document.getElementById('range')
    range.addEventListener("change", ()=>{
      console.log(range.value)
      player.currentTime = range.value
    })

    // 设置总时长
    player.addEventListener("loadedmetadata", ()=>{
      let dt = player.duration
      let dtstr = moment.unix(dt).format('mm:ss')
      let rspan = document.getElementsByClassName('right')[0]
      rspan.innerHTML = dtstr
    })

    // 监听播放器的 timeupdate，一旦播放进度更新就会触发该事件
    player.addEventListener("timeupdate", ()=>{
      let ct = player.currentTime
      let dt = player.duration
      // 更新时间字符串  ctspan   dtspan
      let ctstr = moment.unix(ct).format('mm:ss')
      let dtstr = moment.unix(dt).format('mm:ss')
      console.log(`currentTime:${ctstr}  duration:${dtstr}`)           
      let lspan = document.getElementsByClassName('left')[0]
      let rspan = document.getElementsByClassName('right')[0]
      lspan.innerHTML = ctstr
      rspan.innerHTML = dtstr

      // 更新当前进度条 range input
      let range = document.getElementById('range')
      range.max = dt
      range.value = ct
    })

    // 控制播放速度  0.5   1    2
    document.getElementById('btn_05').onclick = ()=>{
      player.playbackRate = 0.5
    }
    document.getElementById('btn_1').onclick = ()=>{
      player.playbackRate = 1
    }
    document.getElementById('btn_2').onclick = ()=>{
      player.playbackRate = 2
    }
    



    // 音量的 +  -
    let btn_vp = document.getElementById('btn_vp')
    let btn_vm = document.getElementById('btn_vm')
    btn_vp.addEventListener('click', ()=>{
      player.volume = Math.min(player.volume+0.1, 1)
      console.log(player.volume)
    })
    btn_vm.addEventListener('click', ()=>{
      player.volume = Math.max(player.volume-0.1, 0)
      console.log(player.volume)
    })


    // 播放与暂停
    let btn_play = document.getElementById('btn_play')
    btn_play.addEventListener('click', ()=>{
      if(player.paused){
        player.play()
      }else{
        player.pause()
      }
    })

  </script>
  
</body>
</html>